<script lang="ts">
export default {
  data() {
    return {
      dialog: false,
    };
  },
  props: {
    title: String,
    text: String,
    image: String,
    title_dialog: String,
    text_dialog: String,
  },
  methods: {
    openDialog() {
      this.dialog = true;
    },
    closeDialog() {
      this.dialog = false;
    },
  },
};
</script>

<template>
  <div style="white-space: normal;">
    <v-card
      class="mx-auto my-8"
      elevation="16"
      height="300"
      style="border-radius: 25px;"
      width="270"

      @click="openDialog"
    >
      <!-- Inserting the image as the header -->
      <v-img :src="image" alt="Header Image" style="border-radius: 25px;" width="100%">

      </v-img>

      <v-card-item>
        <v-card-title>
          {{ title }}
        </v-card-title>
      </v-card-item>
      <!--      用户主动点击分享 绝大多数APP都是在详情页等需要分享的页面放置一个分享按钮，由用户自行选择分享。这种情况下用户是否分享主要是取决...-->
      <v-card-text>
        {{ text }}
      </v-card-text>

    </v-card>

    <!--     Floating Dialog -->
    <v-dialog v-model="dialog" style="max-width: 40%">
      <v-card style="border-radius: 25px">
        <v-card-actions>
          <img :src="image" alt="cat" height="50%" style="border-radius: 25px" width="100%"/>
        </v-card-actions>
        <v-card-text>
          {{ text_dialog }}
        </v-card-text>
        <v-btn @click="closeDialog">关闭</v-btn>
      </v-card>
    </v-dialog>
  </div>
</template>

<style scoped>

</style>
